<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="utf-8">
	<th:block th:include="oly/cms/article/article_add_include :: addHead" />
	<th:block th:include="include :: oly_froala_css" />
</head>

<body class="white-bg">
	<h1 style="display: inline-block;padding-left: 10px;">添加文章</h1>

	<th:block th:include="oly/cms/article/article_add_include :: addForm(edit='fro')" />
	<th:block th:include="oly/cms/article/article_add_include :: addFooter" />
	<th:block th:include="include :: oly_froala_js" />
	<th:block th:include="oly/cms/article/article_add_include :: addCommonJs" />
	<script th:inline="JavaScript">
		/* 初始化富文本编辑器 */
		var editor = new FroalaEditor("#editor", {
			// Set the language code.
			language: 'zh_cn',
			imageUploadURL: prefix + '/articleImgByFroala', //上传到本地服务器
			height: 800
		});

		/* 进入保存按钮 */
		$("#add-btn").click(function () {
			$("#saveModel").modal("toggle");
			if ($("input[name='cats']").val() === '') {
				layer.msg('请选择一个分类', {
					icon: 6
				})
			} else if ($.validate.form("form-article-add")) {
				//获取编辑内容
				let editorData = editor.html.get(true);
				layer.open({
					title: "确认信息",
					area: ['600px', '600px'],
					type: 1,
					content: $("#addTemplate").html(),
					success: function () {
						$.imageUpload.init(imgConfig);
						//填充图片
						var imgs = chooseImg(editorData);
						if (imgs.length > 0) {
							$.each(imgs, function (i, val) {
								$("#chooseImgBox").append("<img class='ophide' src='" + val + "' />")
							})
						}
						//填充描述
						$("#articleSummary").val(chooseSummary(editorData).slice(0, 160));
						
						//初始化选择事件
						$("#chooseImgBox").on('click','img',function(){
							if ($(this).hasClass("opshow")) {
								$(this).removeClass("opshow");
								$(this).addClass("ophide");
								return;
							}
							if ($(this).hasClass("ophide") && $(".opshow").length < maxPhoto) {
								$(this).removeClass("ophide");
								$(this).addClass("opshow");
								return;
							} else {
								layer.msg('最多选择' + maxPhoto + '张', {
									icon: 6
								})
							}
						});

						$("#uploadImg").on("imgUploaded", function (e, msg) {
							var rs=msg.data.domain + msg.data.fk;
							imgs.push(rs);
							$("#chooseImgBox").append("<img class='ophide' src='" + rs + "' />")
						});

						//保存文章
						$("#saveArticle").click(function () {
							let data = $('#form-article-add').serializeArray();
						    var imgData= getImgSrc($(".opshow"));
							if (imgData.length> 0) {
								data.push({ "name": "articleImg", "value": imgData.join(",") });
							}
							data.push({ "name": "articleContent", "value": editorData });
							data.push({ "name": "articleBuild", "value": 0 });
							data.push({ "name": "articleSummary", "value": $("#articleSummary").val() });
							console.log(data);
							$.operate.saveTab(prefix + "/add", data);
							layer.closeAll();
						});
					}
				});
			} else {
				layer.msg('表单验证未通过', {
					icon: 6
				});
			}
		});
	</script>
</body>

</html>